import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';


let chromOption = ref({
    title: {
        text: 'Chrom ecDNA+',
        left: '30%',
    },
    // legend: {
    //     data: ['ecDNA+'], // 图例名称，应该和 series 中的名称匹配
    //     right: '10%' // 图例的位置，可以设置为 'top', 'bottom', 'left', 'right'
    // },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,  // 设置为 0，确保每个标签都显示
            rotate: 45,    // 如果标签过长，可以设置旋转角度
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'ecDNA+',
            data: [],
            type: 'bar',
            itemStyle: {
                color: '#102b6a', // 设置默认柱子颜色
            },
        }
    ],
    tooltip: {
        trigger: 'axis',  // 或 'item' 取决于你想要的效果
        axisPointer: {    // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params:any) {
            let content = `${params[0].name} <br/>${params[0].seriesName}: ${params[0].value}`;
            return content;
        }
    }
})

let techOption = ref({
    title: {
        text: 'Sequence ecDNA+',
        left: '30%',
    },
    // legend: {
    //     data: ['ecDNA+'], // 图例名称，应该和 series 中的名称匹配
    //     right: '10%' // 图例的位置，可以设置为 'top', 'bottom', 'left', 'right'
    // },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,  // 设置为 0，确保每个标签都显示
            rotate: 40,    // 如果标签过长，可以设置旋转角度
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'ecDNA+',
            data: [],
            type: 'bar',
            itemStyle: {
                color: function(params:any) {
                    const colorList: any = {
                        'Input': '#90c786',
                        'WGS': '#bcaed1',
                        'ChIP': '#f4c38e',
                        'TarCaptrue': '#fffda6',
                        'scATAC': '#456bab',
                        'WXS': '#dd407f',
                        'ATAC': '#b3612b',
                        'Mnase': '#666666',
                    }
                    const colors = ['#fabb6e', '#fc8001', '#acdc88', '#379e32', '#c5a855', '#89b5cb', '#00aad6', '#00a8aa', '#b17dbf', '#b6b5d7', '#8482b9']
                    return params.name in colorList ? colorList[params.name] : colors[Math.floor(Math.random()*10)]
                }
            },
        }
    ],
    tooltip: {
        trigger: 'axis',  // 或 'item' 取决于你想要的效果
        axisPointer: {    // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params:any) {
            let content = `${params[0].name} <br/>${params[0].seriesName}: ${params[0].value}`;
            return content;
        }
    }
})

let pieOption = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        right: '0',
        top: '25%',
        width: '100%',
        bottom: 'auto',
        data: [],
        type: 'plain',
        align: 'auto',
        formatter: function (name:string) {
          return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
        },
        //开启tooltip
        tooltip: {
          show: true
        },
    },
    series: [
        {
          name: 'OncotreeLineage',
          type: 'pie',
          radius: '80%',
          center: ['45%', '55%'],
          data: [],
          emphasis: {
              itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
          },
          itemStyle: {
            color: function(params:any) {
                // if (params.seriesName == 'Type') {
                //     const colorList: any = {
                //         'Input': '#90c786',
                //         'WGS': '#bcaed1',
                //         'ChIP': '#f4c38e',
                //         'TarCaptrue': '#fffda6',
                //         'scATAC': '#456bab',
                //         'WXS': '#dd407f',
                //         'ATAC': '#b3612b',
                //         'Mnase': '#666666',
                //     }
                //     const colors = ['#fabb6e', '#fc8001', '#acdc88', '#379e32', '#c5a855', '#89b5cb', '#00aad6', '#00a8aa', '#b17dbf', '#b6b5d7', '#8482b9']
                //     return params.name in colorList ? colorList[params.name] : colors[Math.floor(Math.random()*10)]
                // } else {
                const colorPalette = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'];
                return colorPalette[params.dataIndex % colorPalette.length];
            },
        },
        },
    ],
});


export {
    chromOption,
    techOption,
    pieOption
}